<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>供需对接服务系统</title>
    <!--layui样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>

    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <style>
        .Left nav a {
            padding-right: 20px;
        }

        .Left ul {
            padding-top: 10%;
            padding-bottom: 2%;
            overflow-y: scroll
        }

        .Left ul li .next {
            margin: 10px 8px 8px 8px;
        }

        .tab_menu {
            width: 150px;
            line-height: 25px;
            background: #FFFFFF;
            position: absolute;
            box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 25%);
            font-size: 14px;
            text-align: center;
            padding: 0;
            z-index: 1000;
        }

        .tab_menu ul {
            width: 100%;
            line-height: 25px;
        }
    </style>

</head>

<body>
<!--头部-->
<header class="whitebg">
    <div class="clearfix">
        <a href="/main"><img src="${re.contextPath}/plugin/common/images/2@2x.png" class="logo fl" alt=""/></a>
        <div class="mineData fr clearfix mt10">
            <img src="${re.contextPath}/plugin/common/images/29@2x.png" alt="" class="fl"/>
            <nav class="fl ml10">
                <p class="fr18"><#assign currentUser = Session["currentPrincipal"]>
                    <#--<img src="${re.contextPath}/images/${currentUser.photo}" class="layui-nav-img">-->
                    ${currentUser.username}</p>
                <p class="gary"><a href="${re.contextPath}/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 退出</a>
                </p>
            </nav>
        </div>
    </div>
    <div class="column bluebg white clearfix" style="padding: 0;">
        <div style="display: inline-block;width: 13%;padding-left: 15px;padding-bottom: 0;margin-top: 6px;margin-bottom: -7px">
            <img src="${re.contextPath}/plugin/common/images/45@2x.png" alt="" class=" moduleIcon"
                 style="width: 30px;height: 30px;float: left">
            <span class="ft16" style="float: left">供需对接服务系统</span>
        </div>
        <div class="tab_list" style="display: inline-block;width: 86%;overflow: hidden">
            <div id="lt-arrow"><img id="left" class="arrow" src="${re.contextPath}/plugin/common/images/lt-arrow.png">
            </div>
            <ul id="ul_jl_tabs" class="ft14 clearfix  ml50" style="display: flex;margin-left: 0;left:43px;"></ul>
            <div id="rt-arrow"><img id="right" class="arrow" src="${re.contextPath}/plugin/common/images/rt-arrow.png">
            </div>
        </div>
    </div>
    <div class="tab_menu" id="tab_menu">
        <ul>
            <li class="list closeother">关闭其他标签</li>
            <li class="list closeall">关闭所有标签</li>
        </ul>
    </div>
    <#--    <div class="column bluebg white clearfix">
            <img src="${re.contextPath}/plugin/common/images/45@2x.png" alt="" class="fl moduleIcon"
                 style="width: 27px;margin-top: 7px;margin-right: 31px;margin-left: -29px;">
            <div class="ft16 fl" style="margin-left: -28px;margin-top: 2px;font-weight: bolder; padding-top: 3px;">供需对接服务系统
            </div>
            <ul id="ul_jl_tabs" class="ft14 clearfix fl ml50"></ul>
        </div>-->
</header>
<!--容器-->
<div class="container clearfix">
    <!--占位-->
    <div class="headerHightAdd" style="height: 123px"></div>
    <!--左侧菜单栏-->
    <div class="Left fl">
        <ul class="white" id="project" style="overflow: hidden">
            <#list menu as item>
                <#if item.systemType ==2>
                    <#list item.children as child>
                        <#if "${child.url}" !="" >
                            <a href="javascript:void(0);" id="${child.id}" lay-ay="${child.url}">
                                <li class="clearfix focus">
                                    <img src="${re.contextPath}/plugin/common/images/${child.icon}.png" alt=""
                                         class="fl icon"/>
                                    <span class="fl">${child.name}</span>
                                    <img src="${re.contextPath}/plugin/common/images/9@2x.png" alt="" class="fr next"/>
                                </li>
                            </a>
                        <#else >
                            <li class="clearfix">
                                <div class="clearfix ">
                                    <img src="${re.contextPath}/plugin/common/images/${child.icon}.png" alt=""
                                         class="fl icon"/>
                                    <span class="fl">${child.name}</span>
                                    <img src="${re.contextPath}/plugin/common/images/9@2x.png" alt="" class="fr next"/>
                                </div>
                                <nav class="hide">
                                    <#list  child.children  as thchild>
                                        <a href="javascript:void(0);" class="clearfix" id="${thchild.id}"
                                           lay-ay="${thchild.url}">
                                            <span class="fl"> ${thchild.name}</span>
                                            <img src="${re.contextPath}/plugin/common/images/9@2x.png" alt=""
                                                 class="fr next"/>
                                        </a>
                                    </#list>
                            </li>
                        </#if>

                    </#list>
                </#if>
            </#list>

        </ul>
    </div>
    <#--    <div class="placeholder"></div>-->
    <!--右侧内容-->
    <div id="ul_jl_tabs_content" class="Right fr" style="margin-left: 14vw;height: calc(100vh - 123px)"></div>
</div>
<!--JQ-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
<!--公用样式JS-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
<!--选择城市js-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/area.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/select.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>

<script>
    document.oncontextmenu = function () {
        return false;
    }
    document.onmousedown = function (event) {
        // console.log(event)
        if (event.which === 1) {
            // console.log('yes')
            // $('.tab_menu').hide()
        }
    }
    $('.tab_menu').hide()
</script>

<script>
    layui.use('layer', function () {
        var layer = layui.layer;
    });

    function clickmenu(object) {
        var that = $(object);
        $(that).after("\t\t<nav>\n" +
            "\t\t\t\t\t<a href=\"sdRelease.html\" class=\"clearfix\">\n" +
            "\t\t\t\t\t\t<span class=\"fl\">项目发布</span>\n" +
            "\t\t\t\t\t\t<img src=\"${re.contextPath}/plugin/common/images/9@2x.png\" alt=\"\" class=\"fr next\"/>\n" +
            "\t\t\t\t\t</a>\n" +
            "\t\t\t\t\t<a href=\"sdList.html\" class=\"clearfix\">\n" +
            "\t\t\t\t\t\t<span class=\"fl\">项目列表</span>\n" +
            "\t\t\t\t\t\t<img src=\"${re.contextPath}/plugin/common/images/9@2x.png\" alt=\"\" class=\"fr next\"/>\n" +
            "\t\t\t\t\t</a>\n" +
            "\t\t\t\t\t<a href=\"sdAnnouncement.html\" class=\"clearfix\">\n" +
            "\t\t\t\t\t\t<span class=\"fl\">变更公告</span>\n" +
            "\t\t\t\t\t\t<img src=\"${re.contextPath}/plugin/common/images/9@2x.png\" alt=\"\" class=\"fr next\"/>\n" +
            "\t\t\t\t\t</a>\n" +
            "\t\t\t\t\t<a href=\"sdResult.html\" class=\"clearfix\">\n" +
            "\t\t\t\t\t\t<span class=\"fl\">结果公示</span>\n" +
            "\t\t\t\t\t\t<img src=\"${re.contextPath}/plugin/common/images/9@2x.png\" alt=\"\" class=\"fr next\"/>>\n" +
            "\t\t\t\t\t</a>\n" +
            "\t\t\t\t</nav>");


    }


    $(function () {
        $("#project a").click(function () {
            var that = $(this);
            $("#project").find(".focus").each(function (i, v) {
                $(v).removeClass('focus');
            });
            if (that.find('li').length > 0) {
                that.find('li').addClass('focus');
            } else {
                that.addClass('focus')
            }
            var title = that.find('span').first().text();
            var url = that.attr("lay-ay");
            _showtab(that.attr('id'), title, that.attr("lay-ay"));
        });
        $("#project div").click(function () {
            var that = $(this);
            $("#project").find(".focus").each(function (i, v) {
                $(v).removeClass('focus');
            });
            that.addClass('focus');
        });
        // $(".Right").css({
        //     left: $(".Left").width() + 'px',
        //     top: $(".headerHightAdd").height() + 'px',
        //     height: ($(document).height() - $(".headerHightAdd").height()) + 'px'
        // });
        // $(".Left ul").css({
        //     height: (($(document).height() - $(".headerHightAdd").height())*0.96) + 'px'
        // });
        $(".Left ul li div").each(function () {
            $(this).click(function () {
                $(this).parent().find("nav").toggle()
            });
        });


        /*		var _tags = '

        ${currentUser.tags}';
		if (_tags) {
			var _ytags = _tags.split(";");
			var _a = _ytags.length - 1;
			for (var i = 0; i < _a; i++) {
				var _b = _ytags[i];
				if (_b) {
					var _c = _b.split(":");
					_showtab('xm_v' + _c[0], '查看-' + _c[1], '/supervisor/projectManager/projectDetail?type=v&id=' + _c[0]);
				}
			}
		}*/
        $("#project a:eq(0)").click();

        var xfedit = localStorage.getItem('xfedit');
        var xmmc = localStorage.getItem('xmmc');
        var caseId = localStorage.getItem('caseId');
        if (xfedit) {
            _showtab('xm_e' + xfedit, '编辑-' + xmmc, '/supplier/projectManager/projectDetail?type=m&fix=e&supProjectId=' + xfedit + '&caseId=' + caseId);
            localStorage.removeItem("xfedit");
            localStorage.removeItem("xmmc");
            localStorage.removeItem("caseId");
        }

    })

    $(document).ready(function () {
        var lt = $("#lt-arrow").offset().left;
        var ltw = $("#lt-arrow").width();
        var rt = $("#rt-arrow").offset().left;
        var distances = rt - (lt + ltw);
        $("#lt-arrow").click(function () {
            var _apst = $("#ul_jl_tabs");
            var ulwidth = _apst.width();
            var ltul = _apst.offset().left
            var ult = lt + ltw - 2
            if (ulwidth > distances && ltul < ult) {
                _apst.css({left: (_apst.position().left + 40) + "px"});
            }
        })
        $("#rt-arrow").click(function () {
            var _apst = $("#ul_jl_tabs");
            var ulwidth = _apst.width();
            var ulleft = _apst.offset().left
            var widthadd = ulleft + ulwidth
            if (ulwidth > distances && widthadd > rt) {
                _apst.css({left: (_apst.position().left - 40) + "px"});
            }
        })
    })

    var tabid;

    $('#ul_jl_tabs').on("mousemove", 'li', function (event) {
        var that = $(this);
        if (event.offsetX > that.width() - 5 || event.offsetX < 5 || event.offsetY < 5 || event.offsetY > that.height() - 5) {
            $('.tab_menu').hide()
        }
    })

    // $('#ul_jl_tabs').on('mouseout', 'li', function () {
    //     $('.tab_menu').hide()
    // })

    $('#ul_jl_tabs').on("mousedown", 'li', function (event) {
        var that = $(this);
        tabid = that.attr('mid')
        // console.log(event);
        if (event.which === 3) {
            $('.tab_menu').css({
                'top': event.clientY + 'px',
                'left': event.clientX + 'px',
            })
            _showTabByMid(tabid)
            $('.tab_menu').show()
        } else {
            $('.tab_menu').hide()
        }
    })

    $('#tab_menu').on("click", "ul .closeother", function () {
        console.log('other');
        var tablist = $('#ul_jl_tabs').find('li')
        for (var i = 0; i < tablist.length; i++) {
            var id = tablist[i].getAttribute('mid')
            console.log(id)
            if (id != tabid) {
                _delTab(id)
            }
        }
        $('.tab_menu').hide()
    })

    $('#tab_menu').on("click", "ul .closeall", function () {
        console.log('all');
        var tablist = $('#ul_jl_tabs').find('li')
        for (var i = 0; i < tablist.length; i++) {
            var id = tablist[i].getAttribute('mid')
            _delTab(id)
        }
        $('.tab_menu').hide()
    })




</script>
</body>
</html>
